<template>
  <div class="RecommedImg">
    <div class="RecommedImg_img">
      <div class="image">
        <img
          src="https://img.meituan.net/msmerchant/61a2fffdce52ffbdb5909253f6a991a2693881.jpg@1280w_640h_1e_1c"
        >
      </div>
      <div class="img">
        <span class="iconfont img">&#xe672;</span>
      </div>
    </div>
    <div class="RecommedImg_content" v-for="(item,index) in dataLists" :key="index[0]">
      <div class="top">
        <p class="top_title">{{item.title}}</p>
        <div class="top_score">
          <span class="score">
            <img v-for="(star,index) in item.stars" :key="index" :src="star.star_url" class="icon">
            <em>4.6</em>
          </span>
          <span class="price">人均：¥{{item.price}}元</span>
        </div>
      </div>
      <div class="footer">
        <div class="addr">
          <span class="iconfont addr">&#xe61f;</span>
          <div class="address">锦江区上沙河铺街789号2栋附178号</div>
        </div>
        <div class="cal">
          <span class="iconfont call">&#xe605;</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RecommedImg",
  data: function() {
    return {
      dataLists: [
        {
          title: "烤界烧烤大排档",
          price: "58",
          stars: [
            {
              star_url:
                "http://s1.meituan.net//bs/file/?f=meis/meishi.mobile:assets/cb45534a7d3737c0.png@eeae317"
            },
            {
              star_url:
                "http://s1.meituan.net//bs/file/?f=meis/meishi.mobile:assets/cb45534a7d3737c0.png@eeae317"
            },
            {
              star_url:
                "http://s1.meituan.net//bs/file/?f=meis/meishi.mobile:assets/cb45534a7d3737c0.png@eeae317"
            },
            {
              star_url:
                "http://s1.meituan.net//bs/file/?f=meis/meishi.mobile:assets/cb45534a7d3737c0.png@eeae317"
            },
            {
              star_url:
                "http://s1.meituan.net//bs/file/?f=meis/meishi.mobile:assets/f906908262f9b786.png@9e62644"
            }
          ]
        }
      ]
    };
  }
};
</script>

<style scoped>
.RecommedImg {
  position: relative;
  background-color: #fff;
}
.image {
  height: 3.2rem;
}
.image img {
  height: 100%;
  width: 100%;
}
.iconfont.img {
  font-size: 0.55rem;
  position: absolute;
  right: 0.4rem;
  top: 2.2rem;
  color: #555;
}
.RecommedImg_content {
  margin-left: 0.2rem;
}
.top {
  border-bottom: 1px solid #ddd8ce;
  overflow: hidden;
  font-size: inherit;
  font-weight: 400;
}
.top_title {
  margin: 0.21rem 1rem 0.15rem 0;
  color: #333;
  font-size: 0.32rem;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  justify-content: flex-start;
}
.top_score {
  margin-bottom: 0.2rem;
  display: flex;
  justify-content: flex-start;
}
.score {
  display: inline-block;
  color: #fa952f;
}
.score img {
  margin-right: 0.04rem;
}
.icon {
  width: 0.28rem;
  height: 0.28rem;
}
.price {
  font-size: 0.26rem;
  color: #999;
  margin-left: 0.24rem;
}
.footer {
  display: flex;
  justify-content: flex-start;
}
.addr {
  width: 80%;
  padding: 0.28rem 0;
  display: inline-block;
}
.address {
  display: inline-block;
  width: 88%;
  vertical-align: middle;
  text-align: justify;
}
.iconfont.addr {
  display: inline;
  font-size: 0.35rem;
  margin-right: 0.1rem;
}
.cal {
  display: inline-block;
  border-left: 0.02rem solid #ddd8ce;
  margin: 0.28rem 0;
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iconfont.call {
  color: #06c1ae;
  width: 0.4rem;
  height: 0.4rem;
  font-size: 0.4rem;
}
</style>